<script setup>
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'

const form = reactive({
  name: '',
  password: ''
})

const rules = reactive({
  name: [
    { required: true, message: '请输入账号', trigger: 'blur' },
    { min: 11, max: 11, message: '请输入 11 位手机号', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 18, message: '请输入 6-18 位字符', trigger: 'blur' },
  ]
})

const ruleFormRef = ref(null)
const submitForm = (formEl) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      ElMessage('手机号登录接口，暂时不可用')
      // 通过验证，进行后续操作
    } else {
      return false
    }
  })
}

</script>

<template>
  <div class="login-phone">
    <el-form ref="ruleFormRef" :model="form" label-width="120px" :rules="rules" class="login-input">
      <div>
        <el-form-item prop="name">
          <!-- <el-input v-model="form.name" /> -->
          <input type="text" v-model="form.name" placeholder="User" maxlength="11">
        </el-form-item>
        <el-form-item prop="password">
          <!-- <el-input v-model="form.password" /> -->
          <input type="password" v-model="form.password" placeholder="Password" maxlength="18">
        </el-form-item>
      </div>
    </el-form>
    <div class="login-button">
      <el-button type="primary" @click="submitForm(ruleFormRef)">登录</el-button>
    </div>
    <p>网易云账号、密码登录因接口存在问题，暂时不可用。</p>
  </div>
</template>

<style scoped lang='scss'>
.login-phone {
  margin-top: 30px;
  padding: 0px 40px;

  .login-input {
    display: flex;
    justify-content: center;

    input {
      margin-bottom: 20px;
      height: 45px;
      width: 320px;
      outline: none;
      background: transparent;
      border-bottom: 1px solid #666;
      font-size: 18px;
      letter-spacing: 1px;

      &::placeholder {
        color: #666;
      }
    }
  }

  .login-button {
    margin-top: 40px;
    display: flex;
    justify-content: center;

    .el-button {
      height: 44px;
      width: 320px;
      border-radius: 22px;
      font-weight: bold;
      font-size: 16px;
    }
  }

  p {
    text-align: center;
    margin-top: 210px;
    color: #aaa;
    font-size: 13px;
  }

}

:deep(.el-form-item__content) {
  margin-left: 0px !important;
}
</style>
